<!--
 * @Author: luoyuxiang 398165@qq.com
 * @Date: 2025-03-15 22:20:47
 * @LastEditors: luoyuxiang 398165@qq.com
 * @LastEditTime: 2025-03-29 13:08:10
 * @FilePath: \formula-syn-vue\src\views\project\components\articleTable.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <el-table
      ref="tableRef"
      :data="listData"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" v-if="show_checkbox" />
      <el-table-column width="70" label="序号">
        <template #default="scope">
          <span class="index">
            {{ (props.page_index - 1) * props.page_size + scope.$index + 1 }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="titleCn" label="中文标题">
        <template #default="scope">
          <span class="clickable-title" @click="handleTitleClick(scope.row)">
            {{ scope.row.titleCn }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="titleCn" label="英文文标题">
        <template #default="scope">{{ scope.row.titleEn }}</template>
      </el-table-column>
      <el-table-column prop="author" label="作者" width="350">
        <template #default="scope">
          <span v-html="scope.row.author"></span>
        </template>
      </el-table-column>
      <el-table-column prop="journaName" label="期刊名称" width="150"></el-table-column>
      <el-table-column label="出版年" width="150">
        <template #default="scope">{{ scope.row.year }} 年 {{ scope.row.number }} 期</template>
      </el-table-column>
      <el-table-column prop="tcmCount" label="处方数" width="70">
        <template #default="scope">
          <el-button @click="handleTcmClick(scope.row)">
            {{ scope.row.tcmCount }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="selectCount"
        label="已选处方"
        width="100"
        align="center"
        v-if="props.selected === 'article_topic'"
      ></el-table-column>
      <!-- 操作插槽  -->
      <slot name="operation"></slot>
    </el-table>

    <!-- ArtcleInfo 组件 -->
    <ArticleInfo
      ref="articleInfoRef"
      :id="articleId"
      :visible="dialogVisible"
      @close="dialogVisible = false"
    ></ArticleInfo>

    <TcmTable
      ref="tcmTableRef"
      :id="articleId"
      :visible="dialogTcmVisible"
      @close="dialogTcmVisible = false"
    ></TcmTable>
  </div>
</template>

<script setup lang="ts">
import TcmTable from "./TcmTable.vue";

const props = defineProps({
  listData: {
    type: Array,
    default: "",
  },

  page_index: {
    type: Number,
    default: 1,
  },
  page_size: {
    type: Number,
    default: 20,
  },
  show_checkbox: {
    type: Boolean,
    default: false,
  },
  selected: {
    //选择话题数据
    type: String,
    default: "article",
  },
  topicId: {
    //选题Id
    type: Number,
    default: null,
  },
});

debugger;
// 表格的引用
const tableRef = ref();

const articleId = ref(0);
const dialogVisible = ref(false);
const articleInfoRef = ref();
// 打开详情弹窗
function handleTitleClick(row: any) {
  articleId.value = row.articleId;
  dialogVisible.value = true;
}

const dialogTcmVisible = ref(false);
const tcmTableRef = ref();
// 打开处方弹窗
function handleTcmClick(row: any) {
  articleId.value = row.articleId;
  dialogTcmVisible.value = true;
}

// 定义 emits
const emit = defineEmits<{
  (event: "selection-change", selection: Array<{ id: number; [key: string]: any }>): void;
}>();

// 处理选中行变化
const handleSelectionChange = (selection: Array<{ id: number; [key: string]: any }>) => {
  emit("selection-change", selection); // 将选中的行数据传递给父组件
};

// 清空选中状态
const clearSelection = () => {
  if (tableRef.value) {
    tableRef.value.clearSelection(); // 调用 Element Plus 的方法清空选中状态
  }
};

// 暴露方法给父组件
defineExpose({
  clearSelection,
});

onMounted(async () => {});
</script>
<style scoped></style>
